<template>
    <div>
     <img :src="src" alt="" ref="img"> 
    </div>
</template>
<script setup lang="ts">
import {onMounted,ref, useTemplateRef} from 'vue'
const props = defineProps(['dataSrc'])
const img = useTemplateRef('img') 
const src = ref('https://tse2-mm.cn.bing.net/th/id/OIP-C.epJP2lIj0UdVfOfESh6qUAAAAA?w=166&h=180&c=7&r=0&o=5&dpr=1.2&pid=1.7')
onMounted(()=>{
    if(img.value){
        const observer = new IntersectionObserver(entries=>{
            if(entries[0].intersectionRatio <= 0) return 
            img.value!.src = props.dataSrc
            observer.unobserve(img.value!)
        })
        observer.observe(img.value)
    }
})
</script>
<style scoped lang="scss">

</style>
